<template>
	<basic-container>
		<avue-crud
			:option="option"
			:data="data"
			ref="crud"
			v-model="form"
			:table-loading="loading"
			:permission="permissionList"
			:page="page"
			@refresh-change="refreshChange"
			@search-change="searchChange"
			@search-reset="searchReset"
			@current-change="currentChange"
			@selection-change="selectionChange"
			@size-change="sizeChange"
			@on-load="onLoad"
		>
			<template slot="search">
				<el-col :md="8" :xs="16" style="height: 52px;">
					<el-form-item label="时间" >
						<el-date-picker
							text="有效期"
							v-model="acTime"
							type="datetimerange"
							range-separator="至"
							size="mini"
							start-placeholder="开始日期"
							:default-time="['00:00:00', '00:00:00']"
							end-placeholder="结束日期"
							align="right"
							format="yyyy-MM-dd HH:mm:ss"
							value-format="yyyy-MM-dd HH:mm:ss"
						></el-date-picker>
					</el-form-item>
				</el-col>
			</template>
			<template slot-scope="scope" slot="orderId">
				<div @click="showOrderDetail(scope.row.orderId, scope.row.userName)">{{ scope.row.orderId }}</div>
			</template>
			<template slot-scope="row" slot="menu">
				<el-button type="text" size="small" @click="viewDetail(row.row.id)" v-has="'/mall-cloud-account/settlementDetail/list'">查看明细</el-button>
				<el-button v-if="row.row.settlementStatue==0" type="text" size="small" @click="confirmation(row.row.id)" v-has="'/mall-cloud-account/settlementMain/startConfirm'">发起确认</el-button>
			</template>
			<template slot="searchMenu">
				<el-button type="primary" @click="exportDetails" size="mini">导出付款单明细</el-button>
			</template>
		</avue-crud>
		<el-col class="btnRow" :span="8">
			<!--<el-button  type="primary" size="small">结算申请</el-button>-->
			<span class="allMoney">已确认总结算金额：{{allMoney}}</span>
		</el-col>
		<el-dialog width="70%" :visible.sync="viewDialogFormVisible" title="结算明细" @close="closeDialog" append-to-body :close-on-click-modal="false">
			<avue-crud
				:option="optionView"
				:data="dataView"
				ref="crudView"
				v-model="formView"
				:table-loading="loadingView"
				:permission="permissionList"
				:page="pageView"
				@refresh-change="refreshChangeView"
				@search-change="searchChangeView"
				@search-reset="searchResetView"
				@current-change="currentChangeView"
				@size-change="sizeChangeView"
				@on-load="onLoadView"
				@expand-change="expandChanges"
				@selection-change="selectionChanged"
			>
				<template slot-scope="scope" slot="orderId">
					<div @click="showOrderDetail(scope.row.orderId, scope.row.userName)">{{ scope.row.orderId }}</div>
				</template>
				<template slot="expand" slot-scope="{ row }">
					<avue-crud ref="crud" :option="option1" :data="rowdata" @on-load="onload(row)">

					</avue-crud>
				</template>
				<template slot-scope="scope" slot="menuLeft">
					<el-button type="primary" @click="outExcel" size="mini">部分导出</el-button>
					<el-button type="primary" @click="outAllExcel" size="mini">全部导出</el-button>
				</template>
			</avue-crud>
			<div slot="footer" class="dialog-footer"><el-button @click="closeDialog">关闭</el-button></div>
		</el-dialog>
	</basic-container>
</template>

<script>
import userAccountLog from '@/components/userAccountLog/userAccountLog';
import { details,closeAnaccount,detailsFormGoods,confirmation } from '@/api/order/orderForm';
import { mapGetters } from 'vuex';
import { getToken } from '@/util/store';
var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
export default {
	data() {
		return {
			idList:[],
			allMoney:0,
			form: {},
			formView: {},
			acTime: [],
			ids:[],
			viewDialogFormVisible: false,
			dialogDeatilVisible: false,
			query: {
				uaType: 2
			},
			loading: true,
			queryView: {
				uaType: 2
			},
			loadingView: true,
			data: [],
			dataView: [
				// {
				// 	uaName: '你好',
				// 	totalAmount: '1002',
				// 	lockAmount: '120',
				// 	serviceAmount: '130',
				// 	adAmount: '80',
				// 	mobile: '15845245235',
				// 	payPassword: '254252',
				// 	payPasswordSalt: '485648',
				// 	orderId: '1276822226919104513'
				// }
			],
			page: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			pageView: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			//页面加载展示用的option
			option: {
				size: 'mini',
				addBtn: false,
				editBtn: false,
				delBtn: false,
				viewBtn: false,
				align: 'center',
				tip: true,
				border: true,
				rowKey: 'id',
				indexLabel:'序号',
				index: true,
				excelBtn:false,
				selection: true,
				selectable:(row)=>{
					if(row.settlementStatue==2){
						return true
					}else{
						return false
					}
				},
				menuWidth: 150,
				searchMenuSpan: 6,
				column: [
					{
						label: '店铺名称',
						prop: 'storeName',
						searchSpan: 6,
						search: true,
						rules: [
							{
								required: true,
								message: '请输入店铺名称',
								trigger: 'blur'
							}
						]
					},
					{
						label: '周期',
						prop: 'cycle',
					},
					{
						label: '总收入',
						prop: 'sumIncome',
					},
					{
						label: '结算金额',
						prop: 'settlementAmount',
						searchLabelWidth: 100,
						rules: [
							{
								required: true,
								message: '请输入结算金额',
								trigger: 'blur'
							}
						]
					},
					{
						label: '平台抽佣金额',
						prop: 'platformCommission',
					},
					{
						label: '已确认总收入',
						prop: 'confirmIncome',
					},
					{
						label: '已确认结算金额',
						prop: 'confirmSettlementAmount',
						searchLabelWidth: 100,
						rules: [
							{
								required: true,
								message: '请输入结算金额',
								trigger: 'blur'
							}
						]
					},
					{
						label: '已确认平台抽佣金额',
						prop: 'confirmPlatformCommission',
					},
					{
						label: '状态',
						prop: 'settlementStatue',
						search: true,
						searchSpan: 6,
						type:"select",
						dicData: Dict.settlementStatusTypeEnum,
						rules: [
							{
								required: true,
								message: '请输入状态',
								trigger: 'blur'
							}
						]
					}
				]
			},
			objview: {},
			optionView: {
				// title:'结算明细列表',
				size: 'mini',
				addBtn: false,
				editBtn: false,
				selection:true,
				delBtn: false,
				viewBtn: false,
				align: 'center',
				tip: true,
				border: true,
				rowKey: 'id',
				// excelBtn: true,
				expand: true,
				expandRowKeys:[],
				menu:false,
				// calcHeight: 380,
				menuWidth: 100,
				searchMenuSpan: 8,
				column: [
					{
						label: '店铺名称',
						prop: 'storeName',
					},
					{
						label: '订单编号',
						prop: 'orderNo',
					},
					{
						label: '下单时间',
						prop: 'orderTime',
					},
					{
						label: '支付时间',
						prop: 'payTime',
					},
					{
						label: '是否已确认收款',
						prop: 'settlementStatue',
						dicData: Dict.settlementStatusTypeEnum,
					},
					{
						label: '结算价',
						prop: 'settlementPrice',
					},
					{
						label: '佣金额',
						prop: 'commissionAmount',
					},
					{
						label: '订单状态',
						prop: 'orderStatus',
						dicData: Dict.orderStatusEnum,
					},
					{
						label: '收货人姓名',
						prop: 'receiverName',
					},
					{
						label: '联系方式',
						prop: 'receiverMobile',
					},
					{
						label: '收货地址',
						prop: 'receiveAddress',
					},
					{
						label: '支付方式',
						prop: 'payWay',
						dicData: Dict.payWayEnum,
					},
					{
						label: '买家备注',
						prop: 'buyerMsg',
					},
					{
						label: '区域',
						prop: 'queryOrganization',
						value: 'queryOrganization',
						searchSpan:8,
						search: true,
						defaultExpandAll:false,
						hide: true,
						dicUrl:'/base/organization/listTree',
						type: 'tree',
						props: {
							label: 'name',
							value: 'name',
							children: 'childrenNodes'
						},
					},
					{
						label: '业务发生区域',
						prop: 'regionalOrganization',
						searchLabelWidth:100,
						// search: true,
						type:'tree',
						searchSpan: 6,
						defaultExpandAll: false,
						dicUrl: '/base/organization/getOrganization?levelm=2',
						props: {
							label: 'name',
							value: 'id',
							children: 'childrenNodes'
						},
						rules: [
							{
								required: true,
								message: '请输入业务发生区域',
								trigger: 'blur'
							}
						]
					},
					{
						label: '业务发生单元',
						prop: 'businessUnitOrganization',
						// search: true,
						searchSpan: 6,
						searchLabelWidth:100,
						type:'tree',
						defaultExpandAll: false,
						dicUrl: '/base/organization/getOrganization?levelm=3',
						props: {
							label: 'name',
							value: 'id',
							children: 'childrenNodes'
						},
						rules: [
							{
								required: true,
								message: '请输入业务发生单元',
								trigger: 'blur'
							}
						]
					},
					{
						label: '业务发生项目',
						prop: 'itemOrganization',
						// search: true,
						type:'tree',
						defaultExpandAll: false,
						dicUrl: '/base/organization/getOrganization?levelm=4',
						props: {
							label: 'name',
							value: 'id',
							children: 'childrenNodes'
						},
						searchSpan: 6,
						searchLabelWidth:100,
						rules: [
							{
								required: true,
								message: '请输入业务发生项目',
								trigger: 'blur'
							}
						]
					}
				]
			},
			option1: {
				border: true,
				header: false,
				menu: false,
				size: 'mini',
				align: 'center',
				menuAlign: 'center',
				column: [
					{
						label: '商品大类名称',
						prop: 'bigClassName'
					},
					{
						label: '商品子类名称',
						prop: 'childClassName',
					},
					{
						label: '商品小类名称',
						prop: 'smallClassName'
					},
					{
						label: '商品名称',
						prop: 'name',
					},{
						label: ' 商品规格',
						prop: 'sku'
					},
					{
						label: '商品数量',
						prop: 'count',
					},{
						label: '商品的约定结算价',
						prop: 'promiseSettlementPrice'
					},
					{
						label: '约定结算比例',
						prop: 'promiseSettlementRatio',
					},{
						label: '商家团长自行补贴',
						prop: 'storeGroupLeaderSubsidy'
					},
					{
						label: '商家活动-秒杀立减',
						prop: 'storeSpikeSubtract',
					},
					{
						label: '商家活动-满减立减',
						prop: 'storeFullCutSubtract',
					},{
						label: '商家活动-优惠券立减',
						prop: 'storeCouponSubtract'
					},
					{
						label: '商家活动-其他立减',
						prop: 'storeOtherSubtract',
					},
					{
						label: '退款金额',
						prop: 'refundAmount',
					},
					{
						label: '商品小计',
						prop: 'note',
					},{
						label: '买家实付金额',
						prop: 'actualPaymentAmount'
					},
					{
						label: '平台优惠总计',
						prop: 'platformActivityDiscountSum',
					},
					{
						label: '实际结算金额',
						prop: 'actualSettlementAmount',
					}
				]
			},
			rowdata:[],
			settlementMainId:'',
		};
	},
	watch:{

	},
	components: {
		userAccountLog
	},
	computed: {
		...mapGetters(['permission', 'userInfo']),
		permissionList() {
			return {};
		}
	},
	mounted() {

	},
	methods: {
		//导出对账
		outAllExcel(){
			console.log('settlementMainId',this.settlementMainId);
			let token = getToken();
			let storeName = this.query.storeName === undefined ? "" : this.query.storeName;
			let settlementMainId = this.settlementMainId === undefined ? "" : this.settlementMainId;
			let queryOrganization = this.query.queryOrganization === undefined ? "" : this.query.queryOrganization;
			window.location.href =
					'order/settlementDetail/outExcel?token=' + token +
					'&settlementMainId=' + settlementMainId +
					'&storeName=' + storeName +
					'&queryOrganization=' + queryOrganization ;
		},
		outExcel(){
			if (this.idList.length > 0){
				let token = getToken();
				let adStatus = this.query.adStatus === undefined ? "" : this.query.adStatus;
				let settlementMainId = this.settlementMainId === undefined ? "" : this.settlementMainId;
				let queryOrganization = this.query.queryOrganization === undefined ? "" : this.query.queryOrganization;
				let idList=this.idList;
				window.location.href =
						'order/settlementDetail/outExcel?token=' + token +
						'&settlementMainId=' + settlementMainId +
						'&adStatus=' + adStatus +
						'&queryOrganization=' + queryOrganization +
						'&idList=' + idList;
				setTimeout(()=>{
					this.idList = [];
					this.onLoad(this.page, this.query);
				},500)
			}else {
				this.$message({
					type: "error",
					message: "至少选择一笔数据"
				});
			}
		},
		expandChanges(row, expendList) {
			console.log(row);
			console.log(expendList);
			if (expendList.length) {
				this.option.expandRowKeys = [];
				if (row) {
					this.option.expandRowKeys.push(row.$index);
				}
			} else {
				this.option.expandRowKeys = [];
			}
			let obj = {
				settlementDetailId: row.id
			};
			this.detailsFormGoods(obj, row);
		},
		detailsFormGoods(obj, row) {
			detailsFormGoods(obj).then(res => {
				this.rowdata = res.data.data;
			});
		},
		confirmation(val){
			let id={
				id:val
			}
			confirmation(id).then(res => {
				if(res.data.code=='200'){
					this.$message({
						message:'发起确认成功！',
						type:'success'
					});
					this.data.forEach(item=>{
						if(item.id==val){
							item.settlementStatue=1
						}
					})
				}
			});
		},
		onload(val) {
			console.log(val);
		},
		viewDetail(settlementMainId) {
			this.settlementMainId = settlementMainId
			this.onLoadView(this.pageView, {settlementMainId:settlementMainId})
			this.viewDialogFormVisible = true;
		},
		closeDialog() {
			this.viewDialogFormVisible = false;
		},
		// 选中状态变化时(结合审核通过,审核拒绝使用)
		selectionChange(list) {
			console.log('selectionList', list);
			this.ids = [];
			list.forEach(item => {
				this.ids.push(item.id);
				console.log(item.confirmSettlementAmount)
				this.allMoney+=item.confirmSettlementAmount;
			});
		},
		//导出明细
		exportDetails(){
			if(this.ids.length>0){
				let token = getToken();
				let ids=this.ids
				window.location.href =
						'/order/settlementMain/exportSettlementDetailPdf?token=' +
						token +
						'&settlementMainIds=' +
						ids;
				this.onLoad(this.page)
			}else{
				this.$message({
					message:'至少选择一条数据',
					type:'error'
				});
			}

		},
		//以下是页面加载店铺需要用到的方法
		searchReset() {
			this.acTime = []
			this.query = {}; // 清空搜索条件时需要保留tab状态对应的用户type
			this.query.uaType = 2;
			this.onLoad(this.page);
		},
		searchChange(params, done) {
			this.page.currentPage = 1;
			params.uaType = this.query.uaType;
			console.log(this.acTime);
			if (this.acTime&&this.acTime[0]) {
				params.cycleStartTime = this.acTime[0];
				params.cycleEndTime = this.acTime[1];
			}else {
				params.cycleStartTime = '';
				params.cycleEndTime = '';
			}
			this.query = params;
			this.onLoad(this.page, params, done);
		},
		currentChange(currentPage) {
			this.page.currentPage = currentPage;
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		refreshChange() {
			this.onLoad(this.page);
		},
		onLoad(page, params = {}, done) {
			console.log(this.option.column);
			this.loading = true;
			this.query.uaType = 2;
			closeAnaccount(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
				if(done){
					done();
				}
				this.loading = false;
				const data = res.data;
				console.log(data);
				this.page.total = data.count;
				this.data = data.data;
			});
			console.log(Dict.integralTradeTypeEnum);
		},
		//以下是页面加载店铺需要用到的方法
		searchResetView() {
			this.queryView = {}; // 清空搜索条件时需要保留tab状态对应的用户type
			this.queryView.uaType = 2;
			this.onLoadView(this.pageView);
		},
		searchChangeView(params, done) {
			this.pageView.currentPage = 1;
			params.uaType = this.query.uaType;
			this.queryView = params;
			this.onLoadView(this.pageView, params, done);
		},
		currentChangeView(currentPage) {
			this.pageView.currentPage = currentPage;
		},
		sizeChangeView(pageSize) {
			this.pageView.pageSize = pageSize;
		},
		refreshChangeView() {
			this.onLoadView(this.pageView);
		},
		selectionChanged(list) {
			console.log(list)
			let idList = []
			if (list.length > 0) {
				for (let item of list) {
					idList.push(item.id)
				}
				console.log(idList)
				this.idList = idList
			} else {
				this.idList = [];
			}
		},
		onLoadView(page, params = {}, done) {
			this.loadingView = true;
			this.queryView.uaType = 2;
			params.settlementMainId=this.settlementMainId;  //搜索时要传主表id
			details(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
				if(done){
					done();
				}
				this.loadingView = false;
				const data = res.data;
				console.log(data,'--------------');
				this.pageView.total = data.count;
				this.dataView = data.data;
			});
			console.log(Dict.integralTradeTypeEnum);
		}
	}
};
</script>

<style>
.dialog-footer {
	text-align-last: center;
}
.btnRow {
	position: relative;
	bottom: 51px;
	left: 10px;
}
.allMoney{
	margin-left: 5px;
}
</style>
